<template>
	<view>
		<cu-custom v-if="isdh" bgColor="bg-white" isBack="true">
			<block slot="content">会员码</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="index_banner">
				<view class="cu-custom" :style="'height:'+CustomBar + 'px;'">
					<view class="cu-bar" style="z-index: 998;position: relative;" :style="'height:'+CustomBar + 'px;padding-top:'+StatusBar+'px'">
						<view class="action">
							<view class="action_a" @click="BackPage_click">
								<u-icon name="arrow-left" color="#FFFFFF" size="15"></u-icon>
							</view>
							<view class="action_a" @click="HomePage">
								<u-icon
									name="home"
									size="18"
									color="#FFFFFF"
								></u-icon>
							</view>
						</view>
						<view class="content cu-custom_text" style="color: #fff;" :style="[{top:StatusBar + 'px'}]">
							会员码
						</view>
					</view>
				</view>
			</view>
			<view class="red-bg">
				<view class="code-block">
					<view style="margin-top: -50px;">
						<u-avatar :src="user_info.avatar" size="70"></u-avatar>
					</view>
					<text class="username">{{user_info.nickname}}</text>
					<view class="uqrcode_a">
						<uqrcode ref="uqrcode" />
					</view>
				</view>
				<view style="text-align: center;color: #5498E7;font-size: 28rpx;margin-top: 32rpx;"
					@click="goPage('/pages/home/scanRecord')">扫码记录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode';
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				showLoading:true,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				uid:0,
				qrcodeSize:200,
				user_info:''
			}
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
			if (this.uid) {
				this.user_click();
			} else {
				this.showLoading = false;
			}
		},
		methods: {
			user_click() {
				let paramsList = {
					uid: this.uid
				}
				let optsList = {
					url: 'u-role_config',
					method: 'post'
				};
				let _this = this;
				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						_this.user_info = res.data.data;
						_this.make('H'+_this.user_info.id);
					}
					_this.showLoading = false;
				});
			},
			make(text) {
				this.$refs
					.uqrcode
					.make({
						size: this.qrcodeSize,
						text:text
					})
					.then(res => {
						// 返回的res与uni.canvasToTempFilePath返回一致
						console.log(res)
						this.qrcodeSrc = res.tempFilePath
					})
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			BackPage_click() {
				uni.navigateBack({
					delta: 1
				});
			},
			HomePage(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index_banner{
		background-color: #1F5AC4;
		overflow: hidden;
	}
	.red-bg {
		width: 750rpx;
		height: 224rpx;
		background-color: #1F5AC4;
		padding-top: 150rpx;

		.code-block {
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 700rpx;
			height:auto;
			border-radius: 16rpx;
			opacity: 1;
			background: #FFFFFF;

			.username {
				font-family: Source Han Sans;
				font-size: 16px;
				font-weight: normal;
				line-height: 24px;
				color: #333333;
				margin: 20rpx 0;
			}
			.uqrcode_a{
				margin-bottom: 40rpx;
			}
		}
	}
</style>